<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>COVID-19 保卫战</title>


    <link href="css/footer.css" rel="stylesheet" type="text/css">
    <link href="css/index_LOGO.css" rel="stylesheet" type="text/css">

    <!--    bootstrap-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <link href="css/main.css" rel="stylesheet" type="text/css">



</head>
<body>
<!--导航栏-->
<!-- <div class="container-fluid">
    <div class="row" style="height: 50px">
            <h4>这里是导航栏</h4>
    </div>
</div> -->

<div class="container" style="background:rgb(255, 255, 255);">

    <!-- <div class="row" id="logo" style="background:rgb(216, 247, 255);height: 180px">
        <img src="index_image/LOGO_Left.png">
        <h1>COVID-19保卫战</h1>
        <div id="right">
            <img src="index_image/LOGO_RIght.png">
        </div>

    </div> -->

    <!--    进度条-->
    
    <!--    游戏内容-->
    <!-- <div id="main" onmousedown="dianJi(event,this),dianJiYiMiao(event,this)" style="height: 800px;width:1170px;border: solid black;"><div id="maint">
        <div id="jindu"></div>
    </div></div> -->
    <!-- <div class="row" id="main" onmousedown="dianJi(event,this),dianJiYiMiao(event,this)" style="height: 800px;width:1170px;border: solid black;">
        
            <div id="maint">
                <div id="jindu"></div>
            </div>
        
    </div> -->
    <div class="row" style="height: 800px;width:1170px;border: solid black;">
        <div id="main" onmousedown="dianJi(event,this),dianJiYiMiao(event,this)">
            <div id="maint">
                <div id="jindu"></div>
                <div id = "shuoming">
                    <h1>游戏说明</h1>
                    <hr>
                    <p>
                        这是一场COVID-19保卫战，你需要通过鼠标点击来消灭传播中的新冠病毒病原体，当病毒体到达边界之前若未消灭，则会降低健康值
                        <br>
                        在其中还会出现疫苗，你可以通过鼠标点击来吸收疫苗，每吸收一个疫苗则健康值+2
                        <br>
                        当健康值为0时，保卫失败，游戏结束。当健康值到达100时，保卫胜利。
                        
                    </p>
                    <hr>
                    <h3>
                        简单、中等、困难对应的初始健康值分别为90，50， 20
                    </h3>
                </div>
                <input type="button" value="开始游戏" id="open" class = "BUTTON_KTH" onclick="op();">
                <div class="container" id="btp">
                    <div class="btn-group  btn-group-lg">
                      <button type="button" class="btn btn-primary" id="sim" onclick="btonClick1();">简单</button>
                      <button type="button" class="btn btn-primary" id="med" onclick="btonClick2();">中等</button>
                      <button type="button" class="btn btn-primary" id="hig" onclick="btonClick3();">困难</button>
                    </div>
                  </div>
                  <input type="button" value="重新开始" id="restart" class = "BUTTON_KTH" onclick="res();">
            </div>
        </div>
    </div>

    <div class="row" id="logo" style="background:rgb(216, 247, 255);height: 180px">
        <img src="index_image/LOGO_Left.png">
        <h1>COVID-19保卫战</h1>
        <div id="right">
            <img src="index_image/LOGO_RIght.png">
        </div>

    </div>
    <!--游戏说明-->
    <div class="row" style="margin-top: 20px;border: solid black;height: 350px; ">


        <div class="col-md-4"  >

            <div class="tabbable" id = "instructions">
                <p > 
                    <br>
                    游戏说明</p>
                <ul class="nav nav-tabs nav-stacked">
                    <li class="active">
                        <a href="#panel-612666" data-toggle="tab">病毒</a>
                    </li>

                    <li>
                        <a href="#panel-171625" data-toggle="tab">治疗药品</a>
                    </li>
                    <li>
                        <a href="#panel-171624" data-toggle="tab">口罩</a>
                    </li>
                    
                </ul>
            </div>

        </div>

        <div class="col-md-8" style="height: 300px; border-left: solid black">
            <div class="tabbable" id="tabs-997651">

                <div class="tab-content" id = "game_instructions">
                    <div class="tab-pane active" id="panel-612666">
                        <p>
                            新冠病毒一般指<strong>2019新型冠状病毒</strong>。2019新型冠状病毒（2019-nCoV，世卫组织2020年1月命名；SARS-CoV-2，国际病毒分类委员会2020年2月11日命名）。
                        </p> 
                            
                        <p>
                            人感染了冠状病毒后常见体征有<strong>呼吸道症状、发热、咳嗽、气促和呼吸困难</strong>等。在较严重病例中，感染可导致<strong>肺炎、严重急性呼吸综合征、肾衰竭，甚至死亡</strong>。对于新型冠状病毒所致疾病没有特异治疗方法。但许多症状是可以处理的，因此需根据患者临床情况进行治疗。此外，对感染者的辅助护理可能非常有效。做好自我保护包括：保持基本的手部和呼吸道卫生，坚持安全饮食习惯等
                        </p>    
                            <hr>
                        <p>
                            <strong>你需要在规定时间内通过点击鼠标消灭新冠病毒，以维持健康值，当未消灭时健康值会下降，健康值为 0 时挑战失败。病毒样式如下</strong>
                        </p>

                        <img src = "images/bingdu1.png">
                        <img src = "images/bingdu2.png">
                        <img src = "images/bingdu3.png">
                    </div>
                    <div class="tab-pane" id="panel-171624">
                        <p>
                            医用外科口罩的主要原材料为熔喷布，熔喷布以聚丙烯为主要原料，纤维直径可以达到0.5-10微米，具有很好的<strong>过滤性、屏蔽性、绝热性和吸油性</strong>，
                            能够<strong>有效阻断飞沫传播</strong>，起到一定预防作用。
                        </p>    
                        <p>
                            N95型口罩对空气动力学直径0.075µm±0.02µm的颗粒的过滤效率达到95%以上。空气细菌和真菌孢子的空气动力学直径主要在0.7-10µm之间变化，
                            也在N95型口罩的防护范围内。帮助降低某些可吸入微生物颗粒物(如霉菌、炭疽杆菌、结核杆菌等)的暴露水平。
                        </p>
                        <p>
                            <strong>戴口罩也能够阻断病毒传播途径</strong>，预防在聚集的人群中引起群体性传染，是一个人社会公德的体现。
                            总而言之，佩戴符合标准的口罩能够起到很好的预防作用，保护自己，也保护他人。
                        </p>
                        <hr>
                        <!-- <p>
                            <strong>当出现口罩时你需要操控鼠标点击以获取口罩，口罩会为你提供一段无敌时间，即遗漏了部分病毒也不会降低生命值</strong>
                        </p> -->
                        <img src = "images/kouzhao1.png"/>
                        <img src = "images/kouzhao2.png"/>
                    </div>
                    <div class="tab-pane" id="panel-171625">
                        <p>
                            中国正在使用的新冠疫苗包含一针、两针、三针三种不同的类型。三种疫苗各自特点：
                        </p>

<p>只打一针的是<strong>腺病毒载体疫苗</strong>。通俗地说，腺病毒像货车一样，可以搭载新冠病毒核酸片段，将其高效地送到细胞内表达抗原，单针接种就可诱导免疫保护反应。</p>
<p>需要打两针的是<strong>灭活疫苗</strong>，这是大家熟悉的传统疫苗，它将活病毒灭活后作为抗原接种到人体，疫苗的成分和天然的病毒结构最接近。</p>
<p>需要打三针的是<strong>重组蛋白疫苗</strong>，是将最有效的抗原成分通过基因工程的方法来制作成疫苗。尽管这三种疫苗类型不同，但都是安全和有效的。</p>
                        
                        <hr>
                        <p>
                            <strong>当你获得疫苗后会提高你的健康值，当健康值为100时 新冠病毒保卫战胜利</strong>
                        </p>
                        <img src = "images/yiMiao.png">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>

</div>


<hr>
<div id="footer">
    <p class="info">
        <a href="https://www.ujn.edu.cn/">联系我们</a>　|　
        <a href="https://www.ujn.edu.cn/">收藏本站</a>　|　
        <a href="https://www.ujn.edu.cn/">人才招聘</a>　|　
        <a href="https://www.ujn.edu.cn/">开源社区</a>　|　
        <a href="https://www.ujn.edu.cn/">信息反馈</a>
    </p>
    <p class="copy">&copy; 济南大学信息科学与工程学院</p>
</div>
</body>
</html>